<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="title" width="800" destroy-on-close :close-on-click-modal="closeOnClickModal">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="名称" prop="imgName" :label-width="formLabelWidth">
          <el-input v-model="form.imgName" autocomplete="off" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
          <el-select
            v-model="form.type"
            placeholder="请选择类型"
            @change="handleTypeChange"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传图片" prop="imgId" :label-width="formLabelWidth">
          <div class="icon-category" @click="openUpload">
            <el-icon v-if="!form.imgUrl" size="30"><Camera /></el-icon>
            <el-image 
                v-else
                style="width: 50px;height: 50px;"
                :src="form.imgUrl" 
                fit="cover"/>
          </div>
          <div style="margin-left: 10px;background: #E6A23C;border-radius: 5px;color: white;"><span>{{ describe }}</span></div>
        </el-form-item>
        <el-form-item v-if="unchedkedShow" label="未选中时图片" prop="imgUncheckedId" :label-width="formLabelWidth">
          <div class="icon-category" @click="openUncheckedUpload">
            <el-icon v-if="!form.imgUncheckedUrl" size="30"><Camera /></el-icon>
            <el-image 
                v-else
                style="width: 50px;height: 50px;"
                :src="form.imgUncheckedUrl" 
                fit="cover"/>
          </div>
          <div style="margin-left: 10px;background: #E6A23C;border-radius: 5px;color: white;"><span>{{ describe }}</span></div>
        </el-form-item>
        <el-form-item label="链接" prop="pageUrl" :label-width="formLabelWidth">
          <el-input v-model="form.pageUrl" autocomplete="off" placeholder="请输入链接" clearable />
        </el-form-item>
        <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
          <el-input-number v-model="form.sort" :min="0" />
        </el-form-item>
        <el-form-item label="状态" prop="isShow" :label-width="formLabelWidth">
          <el-switch v-model="form.isShow" inline-prompt active-text="显示" inactive-text="隐藏" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveOrUpdate">
            确认
          </el-button>
        </div>
      </template>
      <common-upload ref="commonUploadRef" @selectImgUrl="setImgUrl"></common-upload>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { saveOrUpdate, getCarouselInfo } from '~/api/front/carousel.js'
  import { ElMessageBox } from 'element-plus'
  import { showMessage } from '~/utils/my-notification'
  import CommonUpload from '~/components/upload/upload.vue'

  const emit = defineEmits(['refreshDataList'])

  const dialogFormVisible = ref(false)
  const formLabelWidth = '100px'
  const title = ref('新建轮播图')
  const closeOnClickModal = ref(false)
  const commonUploadRef = ref(null)
  const typeOptions = [
    { id: 0, name: '轮播图'},
    { id: 1, name: '首页导航组'},
    { id: 2, name: '底部导航组'}
  ]
  const describe = ref('')
  const unchedkedShow = ref(false)
  const uploadIndex = ref(0)

  const form = reactive({
    id: 0,
    imgName: '',
    imgId: '',
    pageUrl: '',
    sort: '',
    isShow: true,
    imgUrl: '',
    type: '',
    imgUncheckedUrl: '',
    imgUncheckedId: ''
  })
  const rules = {
    imgName: [
      { required: true, message: '名称不能为空!', trigger: 'blur' }
    ],
    pageUrl: [
      { required: true, message: '链接不能为空!', trigger: 'blur' }
    ],
    type: [
      { required: true, message: '请选择类型!!', trigger: 'blur' }
    ]
  }

  function init(id) {
    dialogFormVisible.value = true
    unchedkedShow.value = false
    if(!id) {
      // 新建
      title.value = '新建轮播图'
      form.id = 0
      form.imgName = ''
      form.imgId = ''
      form.pageUrl = ''
      form.sort = ''
      form.isShow = true
      form.imgUrl = ''
      form.type = ''
      form.imgUncheckedId = ''
      form.imgUncheckedUrl = ''
    } else {
      // 修改
      title.value = '修改轮播图'
      // 通过id查询用户信息
      queryCarouselInfo(id)
    }
  }

  // 打开上传组件
  function openUpload() {
    uploadIndex.value = 0
    if(commonUploadRef.value) {
      commonUploadRef.value.init(false)
    }
  }
  // 未选中时上传组件
  function openUncheckedUpload() {
    uploadIndex.value = 1
    if(commonUploadRef.value) {
      commonUploadRef.value.init(false)
    }
  }
  // 选中的图片放入表单中
  function setImgUrl(selectImg) {
    if(uploadIndex.value === 0) {
      form.imgUrl = selectImg.url
      form.imgId = selectImg.id
    } else {
      form.imgUncheckedId = selectImg.id
      form.imgUncheckedUrl = selectImg.url
    }
  }
  // 通过id查询用户信息
  function queryCarouselInfo(id) {
    getCarouselInfo(id).then(res => {
      if(res && res.data.code === 200) {
        const data = res.data.data
        form.id = data.id
        form.imgId = data.imgId
        form.imgName = data.imgName
        form.pageUrl = data.pageUrl
        form.isShow = data.isShow
        form.sort = data.sort
        form.type = data.type
        form.imgUrl = data.imgUrl
        form.imgUncheckedId = data.imgUncheckedId
        form.imgUncheckedUrl = data.imgUncheckedUrl
        if(data.type === 2) {
          unchedkedShow.value = true
        }
      }
    })
  }
  // 类型改变时发生的事件
  function handleTypeChange(val) {
    if(val === 2) {
      describe.value = '图片建议宽度81*81px'
      unchedkedShow.value = true
    } else if(val === 0) {
      describe.value = '建议宽度750*332px'
      unchedkedShow.value = false
    } else {
      describe.value = '建议宽度90 * 90px'
      unchedkedShow.value = false
    }
  }

  // 将方法暴露给父组件
  defineExpose({
    init
  })

  const formRef = ref(null)
  // 确认
  function handleSaveOrUpdate() {
    formRef.value.validate((valid) => {
      if(!valid) {
        return false
      }
      if(!form.imgId) {
        showMessage('请上传图片！', 'error')
        return false
      }
      if(form.type === 2 && !form.imgUncheckedId) {
        showMessage('请上传未选中时的图片！', 'error')
        return false
      }
      ElMessageBox.confirm(`确定进行保存操作?`, '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        saveOrUpdate(form).then(res => {
          if(res && res.data.code === 200) {
            dialogFormVisible.value = false
            emit('refreshDataList')
          } else {
            showMessage(res.data.message, 'error')
          }
        })
      }).catch(err => {
        console.log(err)
      })
    })
  }
</script>

<style>
  .icon-category {
    width: 50px;
    height: 50px;
    border: 1px solid #898484;
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
</style>
